<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>A股列表</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">

</style>
</head>
<body>
<div id="app" class="">
	<h3>msg：{{ msg }}</h3>
	<h3>数据总数：{{ arr_stock.length }}</h3>
	<el-table :data="arr_stock" border>
		<el-table-column prop="n" label="Name" width="180">
			<template #default="scope">
				<a :href=`https://gushitong.baidu.com/stock/ab-${scope.row.c}?name=${scope.row.n}` target="_blank">{{ scope.row.n }}</a>
			</template>
		</el-table-column>
		<el-table-column prop="c" label="code" width="180"></el-table-column>
		<el-table-column prop="p" label="price" width="180" sortable :sort-method="sortFunc2"></el-table-column>
		<el-table-column prop="t" label="市值" width="180" sortable :sort-method="sortFunc"></el-table-column>
	</el-table>
	
	
	
</div>

</body>
<script>
const Main = {
data() {
	return {
		msg: '--',
		arr_stock: [],
	}
},
mounted: function(){
	//实例挂载完成后被调用
	// console.log("实例挂载完成后被调用");
	fetch('./data/20250509.json').then(response => {
		if (!response.ok) {
			throw new Error('Network response was not ok');
		}
		// console.log(response);
		return response.json();
	}).then(data => {
		// console.log("data:");
		// console.log(data); // 这里可以访问解析后的JSON数据
		this.arr_stock = data.data;
		this.msg = data.msg;
		// 使用数据的代码...
	}).catch(error => {
		console.error('Error fetching JSON:', error);
	});
	
	this.$nextTick(function () {
		// 仅在整个视图都被渲染之后才会运行的代码
		// console.log("仅在整个视图都被渲染之后才会运行的代码");
		// this.$refs.myParRef.focus();		//让myParRef组件自动获取焦点，但没生效
		
	});
	// console.log("实例挂载完成后被调用2");
},
methods:{
	//排序 - 自定义排序
	sortFunc(a, b){
		// console.log('a', a);
		// console.log("b", b);
		return Number(a.t) - Number(b.t);
	},
	sortFunc2(a, b){
		return Number(a.p) - Number(b.p);
	},
	hello(par){
		this.message = "参数值为：" + par;
	}
}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>